<script setup lang="ts">
import { computed, inject, reactive, watchEffect } from "vue";
import type { FormDesignerComponents, FormItemPerm } from "../FormComponentMixin";
import { api } from "@/api/common/index";
import { isReadonly } from "../FormItem";
import { useMessage } from "@/hooks/message";

const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<string>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");

const state = reactive({
  options: []
});

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const initQuery = async () => {
  const params = {
    dictCode: config.value.props.dictCode,
    showall: config.value.props.showAll,
    ascs: "order_id",
    exclude: ""
  };
  if (config.value.props.exclude && config.value.props.exclude.length > 0) {
    params.exclude = config.value.props.exclude.join(",");
  }
  api("/admin/dictentry/get/list", params)
    .then(res => {
      if (res.code === 200) {
        state.options = res.data;
      }
    })
    .catch(() => {
      useMessage().error("获取字典失败");
    });
};

watchEffect(() => {
  initQuery();
});
</script>
<template>
  <el-radio-group v-if="config.props.expanding" v-model="_value" :disabled="disabled">
    <el-radio
      v-for="(item, index) in state.options"
      :key="index"
      :label="item.dictText"
      :value="item.dictValue"
      :disabled="disabled"
    />
  </el-radio-group>
  <el-select v-else v-model="_value" :disabled="disabled">
    <el-option
      v-for="(item, index) in state.options"
      :key="index"
      :label="item.dictText"
      :value="item.dictValue"
    />
  </el-select>
</template>

<style scoped></style>
